<template>
	<view class="layout" style="overflow-y: auto; ">
		<view class="moudule">
			<view class="juzhong">
				<view class="juzhong header">添加入驻商家</view>
			</view>
			<view class="juzhong input_box">
				<view class="info">商家名称</view>
				<view class="input right"><input type="text" v-model="name" /></view>
			</view>
			<view class="juzhong input_box">
				<view class="info">商家区域</view>
				<view class="right juzhong">
					<view class="check_locaion juzhong">
						<picker mode="region" :range="years" @change="yearChange">
						    <view>{{ timetext }} </view>
						</picker>
					</view>
					
				</view>
				
			</view>
			<view class="juzhong input_box">
				<view class="info">具体地址</view>
				<view class="input right">
					<input type="text" v-model="location" />
				</view>
			</view>
			<view class="juzhong input_box">
				<view class="info">商家logo</view>
				<view class="juzhong right">
					<view class="juzhong input" style="height: 110rpx; width: 110rpx; border-radius: 10px;">
						<image :src="imageUrl" v-if="imageUrl" mode="aspectFill" class="preview-image"/>
						<button class="juzhong" @click="chooseImage" v-if="!imageUrl">+</button>
					</view>
					<view class="" style="margin-left: 200rpx; " @click="submit_business">
						<button class="juzhong button" style=" font-size: 30rpx;">提交</button>
					</view>
				</view>
			</view>
		</view>
		<view class="moudule">
			<view class="juzhong">
				<view class="juzhong header">查看用户反馈</view>
			</view>
			<view class="table" style="margin-top: 20rpx;">
			    <!-- 表头 -->
			    <view class="table-row table_header">
			      <text class="table-cell">时间</text>
			      <text class="table-cell">反馈内容</text>
			      <text class="table-cell">ID</text>
			      <text class="table-cell">联系方式</text>
			    </view>
			<view class="" style=" height: 550rpx;  overflow-y: auto; ">
				<view v-for="(item, index) in feedbackData" :key="index" class="table-row juzhong" style="height: 150rpx;">
				  <text class="table-cell">{{ item.submitTime }}</text>
				  <text class="table-cell">{{ item.content }}</text>
				  <text class="table-cell">{{ item.designatedID }}</text>
				  <text class="table-cell">{{ item.contactInfo }}</text>
				</view>
			</view>
			    <!-- 使用v-for遍历数据 -->
			    
			</view>
			<view class="juzhong" style="font-size: 20rpx;">
				滑动查看更多...
			</view>
		</view>
		<view class="" @click="goto_charge_log">
			<button class="juzhong button" style="margin-right: 40rpx; font-size: 30rpx;">充值日志</button>
		</view>
		
	</view>
</template>

<script>
	import request from '../../apis/manager.js';


	export default {
		data() {
			return {
				timetext: '请选择地区',
				name:'',
				imageUrl: '',  // 存储选中的图片地址
				imagePath: '', // 存储图片本地路径
				
				checked_province:'',
				checked_city:'',
				checked_county:'',

				city:[],
				county:[],
				location:'',
				feedbackData: [],
				}
		},
		onLoad(){
			this.search_feedback();
		},
		methods: {
			yearChange : function(e){
			    console.log(e)
			    this.timetext = e.detail.value;
				// 获取省和市，忽略区
				this.checked_province = e.detail.value[0]; // 省
				this.checked_city = e.detail.value[1]; // 市
				this.checked_county = e.detail.value[2]; // 区
			} ,	
			async search_feedback(){
				try{
					const res = await request.feedback();
					console.log("feedback",res);
					this.feedbackData = res.data.feedbacks;
					this.feedbackData.sort((a, b) => new Date(b.submitTime) - new Date(a.submitTime));
				}catch(e){
					console.log(e);
					uni.showToast({
						title: '用户反馈列表请求失败',
						icon: 'none'
					})
				}
			},
			async submit_business(){
				try {
					const res = await request.add_business({
					name: this.name,
				    province: this.checked_province,
					city:this.checked_city,
					county:this.checked_county,
					address:this.location,
					logo:this.imageUrl,});
					if (res.status=='success'){
						uni.showModal({
						  title: '提交成功',
						  showCancel: false,
						  confirmText: '确定',
						});
					}else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				}catch(e){
					console.log(e);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				}
			},
			chooseImage() {
			  uni.chooseImage({
				count: 1, // 限制选择一张图片
				success: (res) => {
				  this.imageUrl = res.tempFilePaths[0]; // 存储图片的临时路径
				  this.imagePath = res.tempFilePaths[0]; // 也可以用于上传
				},
				fail: (err) => {
				  console.error('选择图片失败:', err);
				}
			  });
			},
			// 提交图片
			submitImage() {
			  if (!this.imagePath) {
				uni.showToast({
				  title: '请选择图片',
				  icon: 'none'
				});
				return;
			  }
			},
			// 选择省份后更新城市列表
			    onPickerChange_province_target(event) {
			      const index = event.detail.value;
			      this.checked_province = this.province[index];
			      console.log('省份更新成功', this.checked_province);
			
			      // 确保省份存在
			      if (province_list && province_list[this.checked_province]) {
			        const selectedProvince = province_list[this.checked_province];
			        this.city = Object.keys(selectedProvince);  // 获取该省份下的所有城市（如：市辖区）
			        this.checked_city = ''; // 清空已选的城市
					this.checked_county='';
			        this.county = []; // 清空区县列表
			      } else {
			        console.error('选中的省份数据未找到:', this.checked_province);
			      }
			    },
			
			    // 城市选择改变时的处理函数
			    onPickerChange_city_target(event) {
			      const index = event.detail.value;
			      this.checked_city = this.city[index];
			      console.log('城市更新成功', this.checked_city);
			
			      // 确保省份和城市数据存在
			      if (province_list && province_list[this.checked_province] && province_list[this.checked_province][this.checked_city]) {
			        const selectedCity = province_list[this.checked_province][this.checked_city];
			        this.county = selectedCity;  // 获取该城市下的所有区县
			        this.checked_county = '';    // 清空已选的区县
			      } else {
			        console.error('选中的城市数据未找到:', this.checked_city);
			      }
			    },
			
			    // 区县选择改变时的处理函数
			    onPickerChange_county_target(event) {
			      const index = event.detail.value;
			      this.checked_county = this.county[index];
			      console.log('区县更新成功', this.checked_county);
			    },
			goto_charge_log(){
				uni.navigateTo({
					url:'/pagesMine/charge_log/charge_log'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.preview-image{
		width: 90%;
		height: 90%;
	}
	.right{
		width: 500rpx;
		// margin-left: 20rpx;
		margin-right: 20rpx;
		// border: 1px solid black;
	}
	.check_locaion{
		width: 100%;
		height: 55rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(121, 72, 234, 1);
		white-space: nowrap;
	}
	.table {
	  width: 100%;
	  border: 1px solid #ccc;
	}
	
	.table_row {
	  display: flex;
	  flex-wrap: nowrap;
	}
	
	.table-cell {
	  padding: 10px;
	  text-align: center;
	  height: 50rpx;
	  // border: 1px solid #ccc;
	  flex: 1;
	  width: 25%;
	  display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
	
	/* 表头的样式 */
	.table_header .table-cell {
	  background-color: #e0e0e0;
	  font-weight: bold;
	}
	
	/* 保证表头与内容对齐 */
	.table-row {
	  display: flex;
	  width: 100%;
	  height:110rpx;
	  // border: 1rpx solid black;
	}

	.button{
		height: 60rpx;
		width: 160rpx;
		opacity: 1;
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(121, 72, 234, 1);
		white-space: nowrap;
	}
	.moudule{
		border: 1px solid rgba(121, 72, 234, 1);
		margin: 20rpx;
		border-radius: 5px;
	}
	.input_box{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.layout{
		background: rgba(255, 255, 255, 0.17);
		/** 文本1 */
		font-size: 12px;
		font-weight: 900;
		letter-spacing: 0px;
		line-height: 17.38px;
		color: rgba(0, 0, 0, 1);
	}
	.info{
		width: 200rpx;
		font-size: 30rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}
	.input{
		// width: 500rpx;
		height: 60rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(121, 72, 234, 1);
	}
	.header{
		/** 文本1 */
		font-size: 18px;
		font-weight: 900;
		letter-spacing: 0px;
		line-height: 26.06px;
		color: rgba(121, 72, 234, 1);
		width: 350rpx;
		border-bottom: 8rpx solid rgba(121, 72, 234, 1);
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.juzhong{
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
	}
</style>
